//使用方法
// import a from 'index.module.scss' 导入
// <div className={a.lx}></div> 使用方法

//颜色
$dark: #000;
$light: #fff;
$bgc: #f5f5f5;
$border: #e0e0e0;
$hover: #f5f5f5;
$color: #333;
$color2: #666;
$color3: rgb(175, 175, 175);
$color4: #ccc;
$color5: #f5f5f5;
$color6: #ff9900;
$color7: #cc352f;
$color8: green;
$color9: blue;
$color10: #00ffff;
$color11: rgb(240, 240, 240);
$span: rgb(66, 142, 240);

$radius: 5px;

//@mixin和@include复用
//例子
// @mixin flex{
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }
// .lz{
//     @include flex;
//     text-align:center; 可以在lz中添加其他样式
// }
//在元素当中添加伪类的方式  伪元素也同伪类的添加方式一样
// &:hover {
//   background-color: $color4;
// }
@mixin flexbj {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

@mixin table {
  width: 100%;
  height: 100%;
  margin: 10px;
  border: 1px solid $color3;
  border-collapse: collapse;
  border: 0;
  tr {
    th {
      border-bottom: 0.5px solid $color11;
      padding: 10px;
      background-color: $color11;
    }
    text-align: center;
    td {
      border-bottom: 0.5px solid $border;
      padding: 0 10px;
      text-align: center;
    }
  }
}
@mixin li {
  list-style: none;
  padding: 0;
  margin: 0;
}
@mixin top {
  display: flex;
  align-items: center;
  width: 65vw;
  justify-content: space-evenly;
}
@mixin box {
  display: flex;
  margin: 10px;
  width: 100%;
}
@mixin boxleft {
  width: 13%;
  height: 60vh;
  background-color: $light;
  border: 1px solid $color5;
  box-shadow: 0 0 5px $color4;
}
@mixin boxright {
  flex: 1;
  height: 100%;
}
@mixin boxlefttop {
  text-align: left;
  line-height: 7.5vh;
  border-bottom: 1px solid $color4;
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
}
@mixin boxlefttype {
  text-align: left;
  font-size: 13px;
  padding: 8px;
}
@mixin cz {
  margin: 1vw;
  color: $span;
}

.mxkdygltable {
  @include table;
}
.mxkdygltop {
  @include top;
}
.mxkboxleft {
  @include boxleft;
}
.mxkboxright {
  @include boxright;
}
.mxkbox {
  @include box;
}
.mxkboxlefttop {
  @include boxlefttop;
}

.mxkboxlefttype {
  @include boxlefttype;
  &:hover {
    background-color: $color4;
  }
}
.mxkcz {
  @include cz;
}
.bj {
  @include flexbj;
}
.titleBox {
  border-bottom: 1px solid $color4;
  padding: 15px;
}
.title {
  border-left: 4px solid red;
  font-weight: bold;
  padding-left: 5px;
}
.member {
  @include flexbj;
  width: 50vw;
  margin: 15px;
}
.xing {
  color: red;
}
.memberbox {
  display: flex;
  width: 17.5vw;
}
.memberzj {
  width: 40vw;
}
.memberzhu {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: left;
}
.mxkupload {
  margin-left: 10px;
  width: 7vw !important;
  height: 15vh;
  border: 1px dashed $color3;
}
.mermberzong {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.memberfooter {
  width: 100%;
  line-height: 8vh;
  text-align: center;
  box-shadow: 0 0 5px $color4;
  border-top: 1px solid $color4;
}
.footbtn2 {
  color: $light;
}
